<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>医药费管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="./layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">神码医院管理系统</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        <a href="javascript:;">
          <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
          <span id="username-placeholder">管理员</span>
        </a>
        <dl class="layui-nav-child">
          <dd><a href="adminInfo.html">个人信息</a></dd>
          <dd><a href="javascript:exit();">退出</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item">
          <a class="" >病人管理</a>
          <dl class="layui-nav-child">
            <dd><a href="patient.html">病人列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" >病人医药费管理</a>
          <dl class="layui-nav-child">
            <dd><a href="medicalfree.html">病人医药费列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a class="">员工管理</a>
          <dl class="layui-nav-child">
            <dd><a href="staff.html">员工列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a class="">部门管理</a>
          <dl class="layui-nav-child">
            <dd><a href="department.html">部门列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a class="">药品管理</a>
          <dl class="layui-nav-child">
            <dd><a href="drug.html">药品列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a class="">仪器管理</a>
          <dl class="layui-nav-child">
            <dd><a href="instrument.html">仪器列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a class="">管理员管理</a>
          <dl class="layui-nav-child">
            <dd><a href="admin.html">管理员列表</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
      <!-- 内容主体区域  面包屑-->
      <span class="layui-breadcrumb">
              <a>首页</a>
              <a><cite>病人管理</cite></a>
              <a><cite>病人列表</cite></a>
            </span>
      <!-- 水平线 -->
      <hr class="layui-bg-blue">
      <!-- 搜索条件 -->
      <fieldset class="layui-elem-field">
        <legend>筛选条件</legend>
        <div class="layui-field-box">
          <div class="layui-form-item layui-form-pane">

            <label class="layui-form-label">病人姓名</label>
            <div class="layui-input-inline">
              <input type="text" id="search_name" placeholder="请输入病人姓名" class="layui-input">
            </div>
            <div>
              <form class="layui-form" action="form.html">
                <div class="layui-form-item layui-form-pane">
                  <label class="layui-form-label">性别</label>
                  <div class="layui-input-inline">
                    <select name="modules" lay-verify="required" lay-search="" id="search_sex">
                      <option value="">请选择病人性别</option>
                      <option value="男">男</option>
                      <option value="女">女</option>
                    </select>
                  </div>
                </div>
              </form>
            </div>
            <!--                        <label class="layui-form-label">性别</label>-->
            <!--                        <div class="layui-input-inline">-->
            <!--                            <input type="text" id="search_patientSex" placeholder="请选择病人性别" class="layui-input">-->

            <!--                        </div>-->
          </div>

          <div class="layui-form-item layui-form-pane">
            <div class="layui-inline">
              <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
              <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
            </div>
          </div>
        </div>
      </fieldset>
      <table class="layui-hide" id="test" lay-filter="test"></table>

      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
          <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
          <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
          <button class="layui-btn layui-btn-sm" lay-event="insert_medicalfree">添加病人信息</button>
        </div>
      </script>
      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      </script>

      <script type="text/html" id="insert_form">
        <div class="layui-field-box">
          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">病人姓名</label>
            <div class="layui-input-inline">
              <input type="text" id="insert_name" class="layui-input" placeholder="请输入病人姓名">
            </div>
          </div>
          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">病人性别</label>
            <div class="layui-input-inline">
              <input type="text" id="insert_sex" class="layui-input" placeholder="请输入病人性别">
            </div>
          </div>





          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">病人缴费</label>
            <div class="layui-input-inline">
              <input type="text" id="insert_free" class="layui-input" placeholder="请输入病人应缴费金额">
            </div>
          </div>
        </div>
      </script>
      <script type="text/html" id="update_form">
        <div class="layui-field-box">
          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">病人姓名</label>
            <div class="layui-input-inline">
              <input type="text" id="update_name" class="layui-input" placeholder="请输入姓名">
            </div>
          </div>
          <div class="layui-field-box">
            <div class="layui-form-item layui-form-pane">
              <label class="layui-form-label">病人性别</label>
              <div class="layui-input-inline">
                <input type="text" id="update_sex" class="layui-input" placeholder="请输入性别">
              </div>
            </div>
            <div class="layui-field-box">
              <div class="layui-form-item layui-form-pane">
                <label class="layui-form-label">病人缴费</label>
                <div class="layui-input-inline">
                  <input type="text" id="update_free" class="layui-input" placeholder="请输入费用">
                </div>
              </div>
            </div>
          </div>
        </div>
      </script>
      <br><br>
    </div>
  </div>
  <div class="layui-footer" style="text-align: center">
    <!-- 底部固定区域 -->
    DEVELOP BY AMAZINGCODE
  </div>
</div>

<script src="/layui/layui.js"></script>
<script>
  // 登录用户获取和用户退出
  let username = localStorage.getItem("USERNAME");
  // 检查是否获取到用户名
  if (username) {
    // 替换占位符内容
    document.getElementById("username-placeholder").textContent = username;
  } else {
    // 如果未设置 USERNAME，直接返回到登录页面
    alert("你的登录信息已失效，请重新登录！");
    window.location.href = "/login/login.html";
  }
  function exit(){
    localStorage.clear();
    window.location.href = "/login/login.html";
  }

  //JS
  layui.use(['element', 'layer', 'util'], function(){
    var element = layui.element;
    var layer = layui.layer;
    var util = layui.util;
    var $ = layui.$;

    //头部事件
    util.event('lay-header-event', {
      menuLeft: function(othis){ // 左侧菜单事件
        layer.msg('展开左侧菜单的操作', {icon: 0});
      },
      menuRight: function(){  // 右侧菜单事件
        layer.open({
          type: 1,
          title: '特别鸣谢',
          content: '<div style="padding: 15px;">感谢东哥的指导</div>',
          area: ['260px', '100%'],
          offset: 'rt', // 右上角
          anim: 'slideLeft', // 从右侧抽屉滑出
          shadeClose: true,
          scrollbar: false
        });
      }
    });
  });
</script>
<script src="./jquery/jquery-3.6.0.js"></script>

<script>

  function tableFlush(whereJSON) {
    layui.use('table', function(){
      var table = layui.table;

      table.render({
        elem: '#test'
        ,url:'/medicalfree/selectAll'
        ,where:whereJSON
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
          title: '提示'
          ,layEvent: 'LAYTABLE_TIPS'
          ,icon: 'layui-icon-tips'
        }]
        ,title: '用户数据表'
        ,cols: [[
          {type: 'checkbox', fixed: 'left'}
          ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true,templet: function(res){
              return '<em>'+ res.id +'</em>'
            }}
          ,{field:'姓名', title:'病人姓名', width:120, unresize: true,templet: function(res){
              return '<em>'+ res.name +'</em>'
            }}
          ,{field:'性别',title:'病人性别', width:100, unresize: true,templet: function(res){
              return '<em>'+ res.sex +'</em>'
            }}
          ,{field:'缴费', title:'病人的缴费金额', width:150,templet: function(res){
              return '<em>'+ res.free +'</em>'
            }}
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
        ]]
        ,page: true
      });

      //头工具栏事件
      table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
          case 'getCheckData':
            var data = checkStatus.data;
            layer.alert(JSON.stringify(data));
            break;
          case 'getCheckLength':
            var data = checkStatus.data;
            layer.msg('选中了：'+ data.length + ' 个');
            break;
          case 'isAll':
            layer.msg(checkStatus.isAll ? '全选': '未全选');
            break;
          case 'insert_medicalfree':
            layer.open({     // 弹出框处理  模态框
              type: 1               // 模态框
              ,title: '新增病人' //不显示标题栏
              ,closeBtn: false
              ,area: ['500px','500px']  // 宽和高
              ,shade: 0.5
              ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
              ,btn: ['新增', '取消']
              ,btnAlign: 'c'
              ,moveType: 1 //拖拽模式，0或者1
              ,content: $('#insert_form').html()         // 引入自定义表单
              ,btn1: function(index, layero){            // 这个是新增按钮点击事件
                // layer.msg("新增按钮执行");
                let name = $("#insert_name").val();
                let sex = $("#insert_sex").val();
                let free = $("#insert_free").val();
                $.ajax({
                  url:"/medicalfree/insert",           // 请求路径
                  type:"post",                  // 请求的方式，不区分大小写
                  cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                  contentType:"application/json;charset=utf-8",
                  data: JSON.stringify({
                    name:name,
                    free:free,
                    sex:sex
                  }),
                  datatype:"json",        // 返回类型，text文本、html页面、json数据
                  success:function(response){
                    console.log("返回: " + response);
                    if(response.code === 200) {
                      layer.msg("新增病人成功!");
                      layer.close(index);                         // 关闭当前窗口
                      tableFlush();
                    }
                  },
                  error:function(response){
                    console.log("出错返回: " + response);
                  }
                });
              }
              ,success: function(layero){

              }
            });
            break;

                //自定义头工具栏右侧图标 - 提示
          case 'LAYTABLE_TIPS':
            layer.alert('这是工具栏右侧自定义的一个图标按钮');
            break;
        };
      });

      //监听行工具事件
      table.on('tool(test)', function(obj){
        var data = obj.data;
        //console.log(obj)
        if(obj.event === 'del'){
          // alert(data);
          // alert(JSON.stringify(data));
          layer.confirm('真的删除行么', function(index){
            $.ajax({
              url:"/medicalfree/deleteById",           // 请求路径
              type:"post",                  // 请求的方式，不区分大小写
              cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
              data: {
                id:data.id
              },
              datatype:"json",        // 返回类型，text文本、html页面、json数据
              success:function(response){
                console.log("返回: " + response);
                if(response.code === 200) {
                  layer.msg("删除成功!");
                  layer.close(index);                         // 关闭当前窗口
                  tableFlush();
                }
              },
              error:function(response){
                console.log("出错返回: " + response);
              }
            });
          });
        } else if(obj.event === 'edit'){
          layer.open({     // 弹出框处理  模态框
            type: 1               // 模态框
            ,title: '更新病人信息' //不显示标题栏
            ,closeBtn: false
            ,area: ['500px','500px']  // 宽和高
            ,shade: 0.5
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['更新', '取消']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: $('#update_form').html()         // 引入自定义表单
            ,btn1: function(index, layero){            // 这个是新增按钮点击事件
              // layer.msg("新增按钮执行");
              let name = $("#update_name").val();
              let sex = $("#update_sex").val();
              let free = $("#update_free").val();

              $.ajax({
                url:"/medicalfree/updateById",           // 请求路径
                type:"post",                  // 请求的方式，不区分大小写
                cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                contentType:"application/json;charset=utf-8",
                data: JSON.stringify({
                  name:name,
                  sex:sex,
                  free:free,
                  id:data.id
                }),
                datatype:"json",        // 返回类型，text文本、html页面、json数据
                success:function(response){
                  console.log("返回: " + response);
                  if(response.code === 200) {
                    layer.msg("更新成功!");
                    layer.close(index);                         // 关闭当前窗口
                    tableFlush();
                  }
                },
                error:function(response){
                  console.log("出错返回: " + response);
                }
              });
            }
            ,success: function(layero){
              // // 此方法是为了我们在弹出窗口之前，初始化数据的
               $("#update_name").val(data.name);
               $("#update_sex").val(data.sex);
               $("#update_free").val(data.free);
              // $("#update_state").val(data.state);
              // $("#update_bedId").val(data.bedId);
              // $("#update_roomId").val(data.roomId);
              // $("#select_department").val(data.department.id);
              // $("#select_doctor").val(data.doctor.id);

              layui.use(['form'], function(){
                var form = layui.form;
                form.render('select'); // 仅渲染 select 元素
              });
            }
          });
        }
      });
    });
  }
  tableFlush();
</script>


<script>
  layui.use(['form'], function() {
    var form = layui.form; // 获取form模块

    // 监听select的变化
    form.on('select(modules)', function(data) {
      console.log(data.value); // 获取选中的值
    });


    $("#iReset").click(function () {
      // 重置搜索数据
      $("#search_name").val("");
      $("#search_sex").val("");
      // 重置表数据
      tableFlush();
    });
    $("#searchVal").click(function () {
      let search_name = $("#search_name").val();
      let search_sex = $("#search_sex").val();
      let whereJSON = {};
      if(search_name != null && search_name !="") {
        whereJSON.name = search_name;                   //  whereJSON.username  这里的username是一个动态追加的属性名称  这是前端js独有的功能
      }
      if(search_sex != null && search_sex != "") {
        whereJSON.sex = search_sex;
      }
      console.log(whereJSON);
      tableFlush(whereJSON);
    })})
</script>

</body>
</html>